<template>
  <common-page title="主题配置">
    <el-button
      v-if="this.isEdit === false"
      slot="header"
      type="primary"
      @click="submit"
      :loading="loading"
      v-hasPermi="['system:theme:edit']"
      >保存
    </el-button>
    <el-button
      v-if="this.isEdit === true"
      slot="header"
      type="primary"
      @click="submit"
      :loading="loading"
      v-hasPermi="['system:theme:edit']"
      >保存
    </el-button>
    <el-button slot="header" plain @click="reset">重置 </el-button>
    <div class="theme-config-wrap" slot="content">
      <!--    左边部分-->
      <div class="left-config-wrap">
        <common-group-title title="主题色"></common-group-title>
        <div class="color-config-wrap">
          <div
            class="color-item-wrap"
            v-for="item in colors"
            @click="changeColor(item)"
            :style="{ backgroundColor: item.check ? '#F0F0F0' : '' }"
          >
            <div
              class="color-wrap"
              v-for="c in item.color"
              :style="{ backgroundColor: c }"
            ></div>
            <div class="checked" v-if="item.check"></div>
          </div>
        </div>
        <!-- 类目坐标轴-->
        <div class="option-config-wrap">
          <div class="axis-config-group-wrap">
            <common-group-title title="类目坐标轴"></common-group-title>
            <div class="x-axis-config-item-wrap">
              <el-checkbox
                v-model="themeOption.xAxis.axisLine.show"
                @change="merge"
              ></el-checkbox>
              <div class="config-label">轴线</div>
              <div
                :verify="false"
                :maxlength="20"
                v-model="themeOption.xAxis.axisLine.lineStyle.color"
                @change="merge"
                class="colorValue"
              >
                {{ themeOption.xAxis.axisLine.lineStyle.color }}
              </div>
              <el-color-picker
                class="color-picker"
                @change="merge"
                v-model="themeOption.xAxis.axisLine.lineStyle.color"
              ></el-color-picker>
            </div>
            <div class="x-axis-config-item-wrap">
              <el-checkbox
                v-model="themeOption.xAxis.axisTick.show"
                @change="merge"
              ></el-checkbox>
              <div class="config-label">刻度</div>
              <div
                :verify="false"
                :maxlength="20"
                v-model="themeOption.xAxis.axisTick.lineStyle.color"
                @change="merge"
                style="width: 205px; margin-left: 10px; font-size: 14px"
              >
                {{ themeOption.xAxis.axisTick.lineStyle.color }}
              </div>
              <el-color-picker
                class="color-picker"
                @change="merge"
                v-model="themeOption.xAxis.axisTick.lineStyle.color"
              ></el-color-picker>
            </div>
            <div class="x-axis-config-item-wrap">
              <el-checkbox
                v-model="themeOption.xAxis.splitLine.show"
                @change="merge"
              ></el-checkbox>
              <div class="config-label">分割线</div>
              <div
                v-model="themeOption.xAxis.splitLine.lineStyle.color"
                @change="merge"
                style="width: 205px; margin-left: 10px; font-size: 14px"
              >
                {{ themeOption.xAxis.splitLine.lineStyle.color }}
              </div>
              <el-color-picker
                class="color-picker"
                @change="merge"
                v-model="themeOption.xAxis.splitLine.lineStyle.color"
              ></el-color-picker>
            </div>
            <div class="x-axis-config-item-wrap">
              <el-checkbox
                v-model="themeOption.xAxis.axisLabel.show"
                @change="merge"
              ></el-checkbox>
              <!--            {{themeOption.xAxis.axisTick.show}}-->
              <div class="config-label">文字</div>
              <div
                :verify="false"
                :maxlength="20"
                v-model="themeOption.xAxis.axisLabel.color"
                @change="merge"
                class="colorValue"
              >
                {{ themeOption.xAxis.axisLabel.color }}
              </div>
              <el-color-picker
                class="color-picker"
                @change="merge"
                v-model="themeOption.xAxis.axisLabel.color"
              ></el-color-picker>
            </div>
          </div>
          <!--数值坐标轴-->
          <div class="ayis-config-group-wrap">
            <common-group-title title="数值坐标轴"></common-group-title>
            <div class="y-axis-config-item-wrap">
              <el-checkbox
                v-model="themeOption.yAxis.axisLine.show"
                @change="merge"
              ></el-checkbox>
              <div class="config-label">轴线</div>
              <div
                :verify="false"
                :maxlength="20"
                v-model="themeOption.yAxis.axisLine.lineStyle.color"
                @change="merge"
                style="width: 205px; margin-left: 10px; font-size: 14px"
              >
                {{ themeOption.yAxis.axisLine.lineStyle.color }}
              </div>
              <el-color-picker
                class="color-picker"
                @change="merge"
                v-model="themeOption.yAxis.axisLine.lineStyle.color"
              ></el-color-picker>
            </div>
            <div class="y-axis-config-item-wrap">
              <el-checkbox
                v-model="themeOption.yAxis.axisTick.show"
                @change="merge"
              ></el-checkbox>
              <div class="config-label">刻度</div>
              <div
                :verify="false"
                :maxlength="20"
                v-model="themeOption.yAxis.axisTick.lineStyle.color"
                @change="merge"
                style="width: 205px; margin-left: 10px; font-size: 14px"
              >
                {{ themeOption.yAxis.axisTick.lineStyle.color }}
              </div>
              <el-color-picker
                class="color-picker"
                @change="merge"
                v-model="themeOption.yAxis.axisTick.lineStyle.color"
              ></el-color-picker>
            </div>
            <div class="y-axis-config-item-wrap">
              <el-checkbox
                v-model="themeOption.yAxis.splitLine.show"
                @change="merge"
              ></el-checkbox>
              <div class="config-label">分割线</div>
              <div
                v-model="themeOption.yAxis.splitLine.lineStyle.color"
                @change="merge"
                style="width: 205px; margin-left: 10px; font-size: 14px"
              >
                {{ themeOption.yAxis.splitLine.lineStyle.color }}
              </div>
              <el-color-picker
                class="color-picker"
                @change="merge"
                v-model="themeOption.yAxis.splitLine.lineStyle.color"
              ></el-color-picker>
            </div>
            <div class="y-axis-config-item-wrap">
              <el-checkbox
                v-model="themeOption.yAxis.axisLabel.show"
                @change="merge"
              ></el-checkbox>
              <div class="config-label">文字</div>
              <div
                :verify="false"
                :maxlength="20"
                v-model="themeOption.yAxis.axisLabel.color"
                @change="merge"
                class="colorValue"
              >
                {{ themeOption.yAxis.axisLabel.color }}
              </div>
              <el-color-picker
                class="color-picker"
                @change="merge"
                v-model="themeOption.yAxis.axisLabel.color"
              ></el-color-picker>
            </div>
          </div>
        </div>
      </div>
      <!--    右边部分-->
      <div class="right-config-wrap">
        <div class="rightTitle"><span class="pointer">•</span>示例预览</div>
        <el-row :gutter="24">
          <el-col :span="12">
            <div class="sample-chart-wrap">
              <div class="chartTitle">折线图</div>
              <base-chart :option="lineOption"></base-chart>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="sample-chart-wrap">
              <div class="chartTitle">柱状图</div>
              <base-chart :option="barOption"></base-chart>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="sample-chart-wrap">
              <div class="chartTitle">柱状堆积图</div>
              <base-chart :option="barStackOption"></base-chart>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="sample-chart-wrap">
              <div class="chartTitle">折线堆积面积图</div>
              <base-chart :option="areaLineOption"></base-chart>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="sample-chart-wrap">
              <div class="chartTitle">饼图</div>
              <base-chart :option="pieOption"></base-chart>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="sample-chart-wrap">
              <div class="chartTitle">南丁格尔玫瑰图</div>
              <base-chart :option="pieRoseOption"></base-chart>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="sample-chart-wrap">
              <div class="chartTitle">环形图</div>
              <base-chart :option="pieCirqueOption"></base-chart>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </common-page>
</template>

<script>
import BaseChart from "@/components/EChart/components/BaseChart";
import { themeList, themeAdd, themeEdit } from "@/api/screenConfig/themeConfig";
import { deepClone, mergeObject } from "@/utils";
import BaseList from "@/mixins/BaseList";
const dataset = {
  dimensions: ["name", "value1", "value2"],
  source: [
    { name: "星期一", value1: 112, value2: 192 },
    { name: "星期二", value1: 420, value2: 300 },
    { name: "星期三", value1: 62, value2: 172 },
    { name: "星期四", value1: 200, value2: 100 },
    { name: "星期五", value1: 112, value2: 512 },
    { name: "星期六", value1: 312, value2: 412 },
    { name: "星期日", value1: 612, value2: 312 },
  ],
};

import {
  xAxis,
  yAxis,
} from "@/views/screenConfig/dataComponents/configuration/common/index";

export default {
  name: "index",
  mixins: [BaseList],
  components: {
    BaseChart,
  },
  data() {
    return {
      isEdit: false,

      barOption: {
        color: [],
        dataset,
        xAxis,
        yAxis,
        series: [
          {
            type: "bar",
          },
          {
            type: "bar",
          },
        ],
      }, //柱形图配置项
      barStackOption: {
        color: [],
        dataset,
        xAxis,
        yAxis,
        series: [
          {
            type: "bar",
            stack: "stack",
          },
          {
            type: "bar",
            stack: "stack",
          },
        ],
      }, //柱形堆积图配置项
      lineOption: {
        color: [],
        dataset,
        xAxis,
        yAxis,
        series: [
          {
            type: "line",
          },
          {
            type: "line",
          },
        ],
      }, // 折线图配置项
      areaLineOption: {
        color: [],
        dataset,
        xAxis,
        yAxis,
        series: [
          {
            type: "line",
            stack: "Total",
            areaStyle: {},
            smooth: true,
          },
          {
            type: "line",
            stack: "Total", //堆叠
            areaStyle: {}, //面积图
            smooth: true,
          },
        ],
      }, //折线堆积面积图配置项
      pieOption: {
        color: [],
        dataset,
        series: [
          {
            type: "pie",
          },
        ],
      }, //饼图配置项
      pieRoseOption: {
        color: [],
        dataset,
        series: [
          {
            type: "pie",
            roseType: "radius",
          },
        ],
      }, //饼图配置项
      pieCirqueOption: {
        color: [],
        dataset,
        series: [
          {
            type: "pie",
            radius: ["30%", "70%"],
          },
        ],
      }, //饼图配置项

      colors: [
        {
          id: "1",
          name: "",
          check: true,
          backgroundColor: "",
          color: [
            "#59C4E6",
            "#A5E7F0",
            "#EDAFDA",
            "#F7F494",
            "#CBB0E3",
            "#22C3AA",
            "#D0648A",
            "#C4EBAD",
            "#516B91",
            "#518691",
            "#59e6e4",
            "#a5d6f0",
            "#afedcb",
            "#f0a8f4",
            "#d2cd85",
            "#add076",
            "#6499d0",
            "#82bae9",
            "#595191",
            "#775191",
          ],
        },
        {
          id: "2",
          name: "",
          check: false,
          backgroundColor: "",
          color: [
            "#D87c7c",
            "#919E8B",
            "#D7AB82",
            "#6E7074",
            "#61A0A8",
            "#EFA18D",
            "#787464",
            "#516B91",
            "#CC7E63",
            "#ccbe63",
            "#7cd5d8",
            "#9c5990",
            "#bad782",
            "#626e91",
            "#91a861",
            "#b28def",
            "#646b78",
            "#63b079",
            "#6399cc",
            "#637ecc",
          ],
        },
        {
          id: "3",
          name: "",
          check: false,
          backgroundColor: "",
          color: [
            "#C12E34",
            "#759AA0",
            "#E69D87",
            "#8DC1A9",
            "#EA7E53",
            "#EEDD78",
            "#73A373",
            "#73B9BC",
            "#EBDBA4",
            "#5c99c0",
            "#98836f",
            "#d9eba4",
            "#889bc1",
            "#c18da1",
            "#cc77d6",
            "#7886ee",
            "#9c73a3",
            "#73bc75",
            "#baa4eb",
            "#eba4de",
          ],
        },
      ], // 主题颜色列表
      form: {},
      themeOption: {
        xAxis,
        yAxis,
      },
      lastThemeOption: {}, //备份坐标轴
      lastColors: [], //备份主题颜色
      loading: false,
    };
  },
  methods: {
    merge() {
      this.lineOption.xAxis = this.themeOption.xAxis;
      this.lineOption.yAxis = this.themeOption.yAxis;

      this.barOption.xAxis = this.themeOption.xAxis;
      this.barOption.yAxis = this.themeOption.yAxis;

      this.barStackOption.xAxis = this.themeOption.xAxis;
      this.barStackOption.yAxis = this.themeOption.yAxis;

      this.areaLineOption.xAxis = this.themeOption.xAxis;
      this.areaLineOption.yAxis = this.themeOption.yAxis;
    },
    /**
     * 颜色列表改变事件
     * @param item 当前选择主题
     */
    changeColor(item) {
      // XXX 赵曼婷 待优化
      this.barOption.color = item.color;
      this.barStackOption.color = item.color;

      this.lineOption.color = item.color;
      this.areaLineOption.color = item.color;

      this.pieOption.color = item.color;
      this.pieRoseOption.color = item.color;
      this.pieCirqueOption.color = item.color;

      this.colors.forEach(
        (colorItem) => (colorItem.check = colorItem.id === item.id)
      );
    },
    submit() {
      this.loading = true;
      const params = {
        ...this.form,
        themeOption: JSON.stringify(this.themeOption), //转成字符串
        colors: this.lineOption.color.toString(), //转成字符串
      };
      if (this.form.id) {
        themeEdit(params)
          .then((res) => {
            if (res && res.code === 200) {
              this.$GlobalSuccessMessage("编辑成功");
              this.queryInfo();
            } else {
              this.$GlobalErrorConfirm("编辑失败", res.msg);
            }
          })
          .finally(() => {
            this.loading = false;
          });
      } else {
        themeAdd(params)
          .then((res) => {
            if (res && res.code === 200) {
              this.$GlobalSuccessMessage("编辑成功");
              this.queryInfo();
            } else {
              this.$GlobalErrorConfirm("编辑失败", res.msg);
            }
          })
          .finally(() => {
            this.loading = false;
          });
      }
    },
    reset() {
      mergeObject(this.themeOption, this.lastThemeOption);

      // XXX 赵曼婷 待优化
      this.lineOption.color = this.lastColor;
      this.barOption.color = this.lastColor;
      this.pieOption.color = this.lastColor;
      this.pieRoseOption.color = this.lastColor;
      this.pieCirqueOption.color = this.lastColor;
      this.barStackOption.color = this.lastColor;
      this.areaLineOption.color = this.lastColor;

      this.colors.forEach((item) => {
        item.check = item.color.join(",") === this.lastColor.join(",");
      });
    },

    queryInfo() {
      themeList()
        .then((res) => {
          if (res && res.code === 200) {
            if (res.rows.length) {
              this.isEdit = true;
              this.form.id = res.rows[0].id;
              if (res.rows[0].themeOption) {
                this.lastThemeOption = JSON.parse(res.rows[0].themeOption); //备份坐标轴
                this.themeOption = deepClone(this.lastThemeOption);
              }
              if (res.rows[0].colors) {
                this.lastColor = res.rows[0].colors.split(","); //备份的
                let color = res.rows[0].colors;
                let theme = this.colors.find(
                  (item) => item.color.join(",") === color
                );
                if (theme) this.changeColor(theme);
              }
            }
          }
        })
        .finally(() => {
          this.merge();
        });
    },
  },
  mounted() {
    this.isEdit = false;
    this.changeColor(this.colors[0]);
    this.queryInfo();
  },
};
</script>

<style scoped lang="scss">
.color-title {
  width: 80px;
  padding: 20px 0 10px 0;
  margin-right: 1200px;
}

::v-deep .page-have-header {
  overflow-y: scroll !important;
}

.theme-config-wrap {
  width: 100%;
  //height: 100%;
  display: flex;
  //overflow-y: scroll;

  .left-config-wrap {
    //height: 100%;
    width: 370px;
    border-right: 1px solid #eee;
    margin-left: 12px;
    margin-right: 12px;
    .color-config-wrap {
      width: 320px;
      margin: 0 12px;
      display: flex;
      flex-direction: column;
      padding-bottom: 30px;

      .color-item-wrap {
        width: 320px;
        height: 80px;
        padding: 6px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        margin: 8px 0;
        position: relative;
        border: 1px solid #eee;
        border-radius: 3px;

        .color-wrap {
          width: 20px;
          height: 20px;
          margin: 0 5px;
        }

        .checked {
          position: absolute;
          bottom: -1px;
          right: -1px; //角标位置

          &:before {
            //前 (三角形)
            content: "";
            position: absolute;
            right: 0;
            bottom: 0;
            border: 11px solid #cdcdcd;
            border-top-color: transparent;
            border-left-color: transparent;
          }

          &:after {
            //(对号)
            content: "";
            width: 5px;
            height: 10px;
            position: absolute;
            right: 4px;
            bottom: 3px;
            border: 2px solid #fff;
            border-top-color: transparent;
            border-left-color: transparent;
            transform: rotate(45deg);
          }
        }
      }
    }

    .option-config-wrap {
      box-sizing: border-box;

      .axis-config-group-wrap {
        margin-bottom: 30px;

        .option-title {
          width: 120px;
          margin: 0 12px;
          padding-bottom: 15px;
        }

        .x-axis-config-item-wrap {
          display: flex;
          align-items: center;
          padding-left: 12px;
          box-sizing: border-box;
          margin-bottom: 20px;

          .config-label {
            width: 45px;
            margin-left: 10px;
            font-size: 14px;
          }

          .color-picker {
            margin-left: 4px;
          }
          .colorValue {
            margin-top: 3px;
            width: 205px;
            margin-left: 10px;
            font-size: 14px;
            height: 16px;
          }
        }
      }

      .ayis-config-group-wrap {
        margin-bottom: 50px;

        .option-title {
          width: 120px;
          margin: 0 12px;
          padding-bottom: 15px;
        }

        .y-axis-config-item-wrap {
          display: flex;
          align-items: center;
          padding-left: 12px;
          box-sizing: border-box;
          margin-bottom: 20px;

          .config-label {
            width: 45px;
            margin-left: 10px;
            font-size: 14px;
          }

          .color-picker {
            margin-left: 4px;
          }
          .colorValue {
            margin-top: 2px;
            width: 205px;
            margin-left: 10px;
            font-size: 14px;
            height: 16px;
          }
        }
      }

      .button {
        margin-left: 12px;
      }
    }
  }

  .right-config-wrap {
    height: 100%;
    width: calc(100% - 318px);
    .rightTitle {
      font-size: 14px;
      height: 42px;
      line-height: 18px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      padding: 12px 0;
      color: #303133;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      .pointer {
        font-size: 26px;
        margin-right: 10px;
      }
    }
    .sample-chart-wrap {
      width: 100%;
      height: 300px;
      padding-left: 20px;
      .chartTitle {
        position: absolute;
        color: #303133;
        font-weight: bold;
        font-size: 15px;
        opacity: 0.8;
      }
    }
  }
}
</style>
